<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      setup函数，接收到的第一个参数，是一个 props 
        1. props 是一个 proxy 对象，是响应式的。
        2. 不要对 props 做解构，如果解构，会失去响应式，要通过 props.xxx 的方式来取值
     -->
    <div id="app">
      <hello :name="person1" age="18"></hello>

      <hello :name="person2" age="20"></hello>

      <hr />
      <button @click="person1 = 1 + person1">修改person1</button>
      <button @click="person2 = 1 + person2">修改person2</button>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      const { createApp, computed, ref } = Vue;

      const app = createApp({
        // 根组件
        setup() {
          const person1 = ref("张三");
          const person2 = ref("里斯");

          function changePerson1() {
            person1.value = person1.value + "1";
          }

          return {
            person1,
            person2,
            changePerson1,
          };
        },
      });

      // 创建一个组件
      app.component("hello", {
        template: `
          <div>
            <h1>Hello - {{ name }} {{ count }}</h1>
            <p>当前name的姓：{{ firstName }}</p> 
          </div>
        `,

        props: ["name"],

        setup(props) {
          console.log(props); // Proxy 对象

          const { name } = props;
          console.log(name, "name");
          console.log(props, "props");

          // 下面这行代码，firstName 不是响应式的
          // const firstName = props.name[0];
          // console.log(firstName);

          // 通过 computed() 来实现计算属性
          const firstName = computed(() => {
            return props.name[0];
          });
          console.log(firstName);

          return {
            count: 0,
            firstName,
          };
        },
      });

      // 挂载实例
      app.mount("#app");
    </script>
  </body>
</html>
